{% extends 'base_dashboard.html' %}

{% block title %}Unlock code {{ session.code }}{% endblock %}

{% block extra_css %}
<style>
  .proctor-code {
    font-size: 2.5rem;
    letter-spacing: .12em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
  }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-6 text-center">
    <div class="card border-0 shadow-sm rounded-4 p-4">
      <div class="text-muted small mb-2">Share this code with the candidate in the live meeting</div>
      <div class="proctor-code text-primary mb-3">{{ session.code }}</div>
      <div class="small text-muted mb-3">
        {{ session.application.candidate.get_display_name }} · {{ session.application.program.title }}
      </div>
      {% if session.meeting_url %}
        <a href="{{ session.meeting_url }}" target="_blank" rel="noopener" class="btn btn-outline-primary mb-2">Open meeting</a>
      {% endif %}
      <div class="small text-muted">
        Expires {{ session.expires_at }} ·
        {% if session.unlocked_at %}Used{% elif session.is_revoked %}Revoked{% else %}Active{% endif %}
      </div>
      <a href="{% url 'certifications:proctor_queue' %}" class="btn btn-link mt-3">Back to queue</a>
    </div>
  </div>
</div>
{% endblock %}